<#include "/inc/top.html" />
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<#include "/inc/header.html" />
</head>
<body class="theme-blue">
<!--[if lt IE 7 ]> <body class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie ie7 "> <![endif]-->
<!--[if IE 8 ]> <body class="ie ie8 "> <![endif]-->
<!--[if IE 9 ]> <body class="ie ie9 "> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> 
<!--<![endif]-->
<#include "/inc/navbar.html" />

<div class="content">
<div class="header">
<ul class="breadcrumb">
	<li class="active">设备</li>
</ul>
</div>
<div class="main-content">
<!-- tabs -->
<ul class="nav nav-tabs">
	<li class="active" check-permission="device_search"><a href="#list" data-toggle="tab">查询设备</a></li>
	<li check-permission="device_batch_add"><a href="#generate" data-toggle="tab">批量生成</a></li>
	<li check-permission="device_batch_import"><a href="#import" data-toggle="tab">批量导入</a></li>
</ul>
<div class="tab-content">
<div id="list" class="tab-pane active in">
<div class="panel panel-default">
<div class="panel-body">
<table data-toggle="table" data-classes="table table-no-bordered"
       data-url="${ctx}/mgr/listUUID"
       data-side-pagination="server"
       data-pagination="true"
       data-page-list="[10, 20, 50]"
       data-pagination-loop="false"
       data-search="true"
       data-query-params="DT.queryParams"
       data-response-handler="DT.responseHandler">
    <thead>
    <tr>
        <th data-field="devKey">DevKey</th>
        <th data-field="uuid">UUID</th>
        <th data-field="regionName">地区</th>
    </tr>
    </thead>
</table>
</div>
</div>
</div>
<div id="generate" class="tab-pane fade">
<div class="panel panel-default">
<div class="panel-body">
<form method="GET" action="${ctx}/mgr/generateUUID" class="form-horizontal" data-success="render:#generateTable">
	<div class="alert alert-info">批量生成：生成一批UUID，作为设备标志，生成后请保存列表。开发者可以自行生成UUID，并通过批量导入UUID导入本系统。</div>
	<div class="alert alert-danger"></div>
	<div class="form-group">
		<label class="col-sm-1 control-label">地区：</label>
		<div class="col-sm-6">
			<select id="slpk1" name="region" class="selectpicker"></select>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-1 control-label">生成数量：</label>
		<div class="col-sm-4 padding-top-small">
			<input name="count" type="number" class="form-control" placeholder="生成数量" required="required" min="1" max="5000">
		</div>
		<div class="col-sm-1 padding-top-small">
			<a href="javascript:void(0);" class="btn btn-primary form-control btn-submit">生成</a>
		</div>
	</div>
</form>
<table id="generateTable" class="table hide">
<thead>
<tr>
	<th>DevKey</th>
	<th>UUID</th>
</tr>
</thead>
<tbody>
<!--@each data as e-->
<tr>
	<td>?{e.devKey}</td>
	<td>?{e.uuid}</td>
</tr>
<!--@/each-->
</tbody>
</table>
</div>
</div>
</div>
<div id="import" class="tab-pane fade">
<div class="panel panel-default">
<div class="panel-body">
<form method="POST" action="${ctx}/mgr/importUUID" data-success="render:#importTable" class="form-horizontal">
	<div class="alert alert-info">批量导入UUID：开发者将自行生成的UUID导入到本系统，用于识别设备。如果提供了开发者授权回调地址，可以不再手动导入设备UUID。</div>
	<div class="alert alert-danger"></div>
	<div class="form-group">
		<label class="col-sm-1 control-label">地区：</label>
		<div class="col-sm-6">
			<select id="slpk" name="region" class="selectpicker"></select>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-1 control-label">UUID：</label>
		<div class="col-sm-6">
			<textarea name="uuids" placeholder="一行一个uuid" class="form-control" rows="5" required="required"></textarea>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-1 col-sm-4">
			<a href="javascript:void(0);" class="btn btn-primary btn-submit">导入</a>
		</div>
	</div>
</form>
<table id="importTable" class="table hide">
<thead>
<tr>
	<th>DevKey</th>
	<th>UUID</th>
	<th>错误信息</th>
</tr>
</thead>
<tbody>
<!--@each data as e-->
<tr class="?{e.msg ? 'danger' : 'success'}">
	<td>?{e.devKey}</td>
	<td>?{e.uuid}</td>
	<td>?{e.msg}</td>
</tr>
<!--@/each-->
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- tabs end!-->
</div>
</div>
<#include "/inc/script.html" />
</body>
</html>
<script type="text/javascript">
hide();
$(function() {
		$(".selectpicker").selectpicker({
			noneSelectedText : '请选择'
		});
 
		$(window).on('load', function() {
			$('.selectpicker').selectpicker('val', '');
			$('.selectpicker').selectpicker('refresh');
		});
 
		//下拉数据加载
		$.ajax({
			type : 'get',
			url : "${ctx}/mgr/getRegionList",
			dataType : 'json',
			success : function(datas) {//返回list数据并循环获取
				//导入
				var select = $("#slpk");
				//生成
				var select1 = $("#slpk1");
				console.log(datas);
				for (var i = 0; i < datas.data.length; i++) {
					select.append("<option value='"+datas.data[i].id+"'>"
							+ datas.data[i].regionName + "</option>");
					select1.append("<option value='"+datas.data[i].id+"'>"
							+ datas.data[i].regionName + "</option>");
				}
				console.log(select);
				console.log(select.text());
				$('.selectpicker').selectpicker('val', '');
				$('.selectpicker').selectpicker('refresh');
			}
		});
		
		
	});
</script>
